<template>
  <div>
    树形表格
    <general-table
      :columns="columns"
      :tableData="tableData"
      :tableAttr="tableAttr"
    >
    </general-table>

    懒加载的树形表格
    <general-table
      :columns="columns"
      :tableData="tableData1"
      :tableAttr="tableAttr1"
    >
    </general-table>
  </div>
</template>
<script lang="ts" setup>
import GeneralTable from "@/components/GeneralTable.vue"

const tableAttr = {
  expandAll: false,
  rowkey: (row: any) => {
    return row.id
  },
  border: true,
}

const tableAttr1 = {
  expandAll: false,
  rowkey: (row: any) => {
    return row.id
  },
  border: true,
  lazy: true,
  load: (row: User, treeNode: unknown, resolve: (date: User[]) => void ) => {
    setTimeout(() => {
      resolve([
        // 要加载的子数据
        {
          id: 32222,
          date: '2016-05-31',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 32,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ])
    }, 1000)
  }
}

const columns = [
  { label: 'date', prop: 'date', sortable: true, },
  { label: 'name', prop: 'name', sortable: true, },
  { label: 'address', prop: 'address', sortable: true, },
]

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
